<template>
    <div class="edit-header">
        <div class="logo-wrap" @click="onGoHome">
            <img :src="logo" />
        </div>

        <!-- 应用名称 -->
        <div class="block-wrap" style="margin-left: 30px;" @click="onNameSetting">
            <el-tooltip
                effect="dark"
                :content="appName || '未命名应用'"
                placement="bottom"
            >
                <div class="block-item item-title">
                    {{ appName || '未命名应用' }}
                </div>
            </el-tooltip>
        </div>

        <el-divider direction="vertical" />

        <!-- 风格 -->
        <div class="block-wrap" @click="onThemeSetting">
            <el-icon><icon-theme /></el-icon>
            <div class="block-item">风格</div>
        </div>

        <el-divider direction="vertical" />

        <!-- 明亮/暗黑模式 -->
        <div class="block-wrap">
            <div class="block-item">
                <el-switch
                    :modelValue="isDark"
                    inline-prompt
                    active-icon="icon-moon"
                    inactive-icon="icon-sunny"
                    inactive-color="#A8ABB2"
                    @change="toggleDark()"
                />
            </div>
        </div>

        <el-divider direction="vertical" />

        <!-- 量尺 -->
        <el-dropdown
            trigger="hover"
            :hide-on-click="false"
            class="block-wrap"
            @command="onRuler"
        >
            <div class="block-wrap ruler-wrap">
                <el-icon><icon-measuring-ruler /></el-icon>
                <div class="block-item">量尺</div>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <template v-if="!rulerVisible">
                        <el-dropdown-item command="show">
                            <el-icon><icon-attention /></el-icon>显示
                        </el-dropdown-item>
                    </template>
                    <template v-else>
                        <el-dropdown-item command="hide">
                            <el-icon><icon-attention-forbid /></el-icon>隐藏
                        </el-dropdown-item>
                        <el-dropdown-item command="delete">
                            <el-icon><icon-delete /></el-icon>删除辅助线
                        </el-dropdown-item>
                    </template>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

        <el-divider direction="vertical" />

        <!-- 缩放 -->
        <div class="block-wrap zoom-wrap">
            <el-icon class="zoom-btn" @click="phoneZoom -= 5"><icon-minus /></el-icon>
            <div class="zoom-txt" @click="phoneZoom = 100">
                {{ phoneZoom }}%
            </div>
            <el-icon class="zoom-btn" @click="phoneZoom += 5"><icon-plus /></el-icon>
        </div>

        <el-divider direction="vertical" />

        <!-- 快捷键提示 -->
        <div class="block-wrap" @click="onShowShortcutKeysTip">
            <el-icon><icon-keyboard /></el-icon>
            <div class="block-item">快捷键</div>
        </div>

        <el-divider direction="vertical" />

        <image-picker
            type="custom"
            preview
            class="block-wrap images-wrap"
        >
            <el-icon :size="14"><icon-picture /></el-icon>
            <div class="images-title block-item">图片库</div>
        </image-picker>

        <div class="right-wrap">
            <el-button
                class="right-btn plain-btn"
                @click="onPreview"
            >
                预览
            </el-button>
            <el-button
                type="primary"
                title="ctrl + s"
                :loading="saveLoading"
                class="right-btn"
                @click="onSave"
            >
                保存
            </el-button>
        </div>

        <!-- 应用名称设置 -->
        <app-name-setting ref="appNameSettingRef" />
        <!-- 应用风格设置 -->
        <app-theme-setting ref="appThemeSettingRef" />
        <!-- 应用预览 -->
        <app-preview-dialog ref="appPreviewRef" />
        <!-- 快捷键提示 -->
        <shortcut-keys-tip ref="shortcutKeysTipRef" />
    </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { useEditStore } from '@/store'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { isDark } from '@/libs/dark'
import { useToggle } from '@vueuse/core'
import logo from '@/assets/images/logo.png'
import useFeature from '@/libs/feature'
import ShortcutKeysTip from './components/shortcut-keys-tip'
import AppNameSetting from './components/app-name-setting'
import AppThemeSetting from './components/app-theme-setting'
import AppPreviewDialog from '@/components/app-preview-dialog'
import { deleteRulerLine } from '../edit-main/components/edit-main-ruler'
export default defineComponent({
    name: 'EditHeader',
    components: {
        ShortcutKeysTip,
        AppNameSetting,
        AppThemeSetting,
        AppPreviewDialog
    },
    setup() {
        const route = useRoute()
        const router = useRouter()
        const editStore = useEditStore()

        const {
            isHasFeature
        } = useFeature()

        const toggleDark = useToggle(isDark)

        const saveLoading = ref(false)
        const downloadLoading = ref(false)

        const appNameSettingRef = ref(null)
        const appThemeSettingRef = ref(null)
        const appPreviewRef = ref(null)
        const shortcutKeysTipRef = ref(null)

        const appId = computed(() => route.params.appId)
        const historyId = computed(() => editStore.historyId)
        const appName = computed(() => editStore.appName)

        const phoneZoom = computed({
            get: () => {
                let value = (`${editStore.phoneZoom}`).replace('.', '')
                if (value.length < 3) {
                    value += [...new Array(3 - value.length).keys()].fill(0).join('')
                }
                return +value
            },
            set: val => {
                if (val < 50 || val > 200) return
                editStore.phoneZoom = val / 100
            }
        })

        const rulerVisible = computed({
            get: () => editStore.rulerVisible,
            set: val => editStore.rulerVisible = val
        })

        // 回到首页
        const onGoHome = () => {
            router.push('/')
        }

        const onNameSetting = () => {
            appNameSettingRef.value.show()
        }

        // 风格设置
        const onThemeSetting = () => {
            appThemeSettingRef.value.show()
        }

        // 量尺设置
        const onRuler = type => {
            switch (type) {
                case 'show':
                    rulerVisible.value = true
                    break;
                case 'hide':
                    rulerVisible.value = false
                    break;
                case 'delete':
                    deleteRulerLine()
                    break;
            }
        }

        // 显示快捷键提示
        const onShowShortcutKeysTip = () => {
            shortcutKeysTipRef.value.show()
        }

        // 预览
        const onPreview = () => {
            appPreviewRef.value.show({
                appId: appId.value
            })
        }

        // 保存
        let saveMessageRef = null
        const onSave = () => {
            saveLoading.value = true
            saveMessageRef = ElMessage({
                showClose: true,
                message: '保存中...',
                type: 'info',
                grouping: true
            })
            editStore.saveAppData().finally(() => {
                console.log('123')
                saveLoading.value = false
                saveMessageRef.close()
            })
        }

        return {
            isHasFeature,
            logo,
            appName,
            phoneZoom,
            rulerVisible,

            saveLoading,
            downloadLoading,
            appNameSettingRef,
            appThemeSettingRef,
            appPreviewRef,
            shortcutKeysTipRef,

            isDark,
            toggleDark,

            onGoHome,
            onNameSetting,
            onThemeSetting,
            onRuler,
            onShowShortcutKeysTip,
            onPreview,
            onSave
        }
    }
})
</script>

<style lang="less" scoped>
@import './edit-header.less';
</style>